import React from 'react'
import {
  SchemaForm, Item, Observer
} from '@amazebird/antd-schema-form'

const schema = {
  input1: {
    label: '测试1',
    component: 'InputNumber'
    // max: 30
  },
  select: {
    label: '切换输入框',
    component: 'Select',
    options: [{ label: '输入框1', value: 1 }, { label: '输入框2', value: 2 }]
  },
  input2: {
    label: '测试2',
    component: 'InputNumber',
    rules: [{
      max: 30, type: 'number'
    }],
    value: Observer({
      watch: ['select', 'input1'],
      action: ([select, input1]) => { return select === 1 ? input1 : 0 }
    })
  },
  input3: {
    label: '测试3',
    component: 'InputNumber',
    rules: [{
      max: 30, type: 'number'
    }],
    value: Observer({
      watch: ['select', 'input1'],
      action: ([select, input1]) => { return select === 2 ? input1 : 0 }
    })
  }
}

export default function Demo () {
  return (
    <SchemaForm schema={schema} initialValues={{ input1: 40 }}>
      <Item field="input1" />
      <Item field="select" />
      <Item field="input2" />
      <Item field="input3" />
    </SchemaForm>
  )
}
